<!--
    Not插件
     <template>
    <div class="notify" v-if="ShowNot">
        <div>通知内容</div>
        <div>基础用法</div>
        <div>通知类型</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ShowNot: false
        }
    },
    methods: {
        show() {
            this.ShowNot = true;
        },
        hide() {
            this.ShowNot = false;
        }
    }
}
</script>
<style>
.notify {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: antiquewhite;
}
</style> 
-->

 <!-- 下面的是老师写的上面是之前自己写的 -->
<template>
    <div class="notify" v-if="msg" :style="{color:color,backgroundColor:bgColor}">
        {{msg}}
    </div>
</template>
<style scoped="scoped">
.notify {
    height: 44px;
    line-height: 44px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
}
</style>
<script>
export default {
    data() {
        return {
            //通知文本
            msg: "",
            //文本颜色
            color: "#fff",
            //背景颜色
            bgColor: "#090"
        }
    },
    methods: {
        //显示通知
        show(msg, bgColor = "#090", color = "#fff") {
            this.msg = msg;
            this.bgColor = bgColor;
            this.color = color;
            setTimeout(() => {
                this.hide();
            }, 2000)
        },
        hide() {
            this.msg = "";
        },
        success(msg) {
            this.show(msg, '#090')
        },
        danger(msg) {
            this.show(msg, '#ff5500')
        },
        warning(msg) {
            this.show(msg, '#ffd606')
        }
    },

}
</script>